<template>
    <div class="register">
                  <!-- enctype规定发送到服务器之前应该如何对表单数据进行编码 -->
      <form action="" method="post" @submit.prevent="sub"  enctype="multipart/form-data">
          <input v-model="username" type="text" name="username" placeholder="用户名">
          <input v-model="password" type="text" name="password" placeholder="密码">
          <input v-model="passwords" type="text" @input="verificate()" name="passwords" placeholder="重复密码"><div class="warn">{{info}}</div>
          <div class="avatar">
            <label for="avatar"  class="label">点击上传图片
              <img src="" alt="">
            </label>
            <input type="file" @change="imgpick(this)" accept="image/png, image/jpeg, image/gif, image/jpg" name="avatar" id="avatar">
          </div>
          <input type="submit" value="注册">
      </form>
      <span @click="login()" class="login">登陆</span>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        username:'',
        password:'',
        passwords:'',
        info:'',
        imgsrc:''
      }
    },
    methods: {
      verificate(){
        if(this.password != this.passwords){
          this.info='密码不一致'
        }else{
          this.info='可以用'
        }
      },
      // 选择图片
      imgpick(e){
        this.$weui.uploader()
      },
      login(){
        this.$router.push({name:'login'})
      },
      sub(){
        if(this.username && this.password && this.password == this.passwords ){
          this.$axios({
            method:'post',
            url:'/reg',
            data:{
              username:this.username,
              password:this.password,
              img:'imagename'
            },
            
          }).then(res=>{
            if(res.data.code == '3'){
              this.$router.push({name:'login'})
              console.log('注册成功')
            }else{
              alert('注册失败'+res.data.msg)
            }
          })
        }else{
          alert('注册失败')
        }
      }
    },
  }
  </script>
  <style scoped>
    .register{
      margin: 0 auto;
      width: 90%;
    }
    .register input{
      display: block;
      box-sizing: border-box;
      border: 1px solid gainsboro;
      width: 80%;
      height: 32px;
      padding: 2px 10px;
      margin: 20px auto;
    }
    .register input[type="submit"]{
      background-color: brown;
      color: white;
    }
    .register input[type="file"]{
      display: none;
    }

    .register .avatar{
      width: 80%;
      margin: 0 auto;
    }
    .register .avatar img{
      width: 50px;
      display: block;
      border: 1px solid gainsboro;
      height: 50px;
    }
    .login{
      width: 80%;
      text-align: center;
      display: block;
      margin: 0 auto;
    }

    .warn{
      width: 80%;
      margin: 10px auto;
      color:red
    }
  </style>